/**
 * @Component TTable 交叉决策表
 * @author Tantuer
 *
 */
import React, { useState, useEffect, useImperativeHandle } from 'react';
import { Dropdown, Menu, message, Row, Col } from 'antd';
import Actions from 'src/components/Actions';
import InputText from 'src/components/InputText';
import PopValue from 'src/components/PopTab/PopValue';
import ConditionsIndex from 'src/components/Conditions/ConditionsIndex';
import { validateConditions } from 'src/components/Conditions/validate';
import { validateActions } from 'src/components/Actions/validate';
import { randomKey } from 'src/utils/utils';
import { compareClass } from 'src/utils/compare';
import { cloneDeep, flattenDepth } from 'lodash';
import { IconFont } from 'src/components/IconFont';
import './index.less';

const TD_TYPE = {
  _LABEL: 'label',
  _ROW_CONDITION: 'row_condition',
  _COL_CONDITION: 'col_condition',
  _ACTION: 'action',
};

const rows = [
  {
    cells: [
      {
        text: '',
        type: TD_TYPE._LABEL,
      },
      {
        type: TD_TYPE._COL_CONDITION,
      },
    ],
  },
  {
    cells: [
      {
        type: TD_TYPE._ROW_CONDITION,
        conditions: [],
      },
      {
        type: TD_TYPE._ACTION,
      },
    ],
  },
];
export default function CrossTable(props) {
  const { logs = {} } = props
  const [tdata, setTData] = useState(rows);
  const [logsList, setLogsList] = useState([]);
  const [headerCols, setHeaderCols] = useState([
    {
      left_var_code: '',
      left_var_type: '',
      left_var_name: '',
    },
  ]); // 列头
  const [headerRows, setHeaderRows] = useState([
    {
      left_var_code: '',
      left_var_type: '',
      left_var_name: '',
    },
  ]); // 行头

  useEffect(() => {
    if (logs && logs.rules && logs.rules.length > 0) {
      const conditionLogList = flattenDepth(logs.rules.map((item) => item.conditions));
      setLogsList(conditionLogList)
    }
  }, [props.logs])

  const isHit = (td) => {
    if (!logs || Object.keys(logs).length === 0 || !logs.rules || logs.rules.length === 0 || !td.conditions) return null
    const conditionLogList = logsList;
    let isHit = false
    const arr = td.conditions.map(item => {
      const con = conditionLogList.find(item2 => item2.id === item.id)
      return con && con.hit
    })
    if (arr.length === 0) {
      isHit = undefined
    } else if (arr.length === 1) {
      isHit = arr[0]
    } else {
      const junction_type = td.conditions[1].junction_type
      if (junction_type === 'and') {
        isHit = arr.reduce((acc, cur) => acc && cur)
      } else {
        isHit = arr.reduce((acc, cur) => acc || cur)
      }
    }
    return isHit
  }

  // const compareTData = useRef(null);

  useImperativeHandle(props.createRef, () => ({
    // 暴露方法给父组件,收集验证值
    getValue: (cb, showError = true) => {
      const { error, value } = getValue(showError); // 验证数据
      cb(value, error);
    },
  }));

  // rows tdata
  useEffect(() => {
    const initData = transferToUsefulData(rows);
    resetData(initData);
  }, []);

  useEffect(() => {
    if (!props.value || (props.value.rows && props.value.rows.length < 2)) {
      return;
    }
    const initData = transferToUsefulData(props.value.rows);
    // compareTData.current =
    //   props.compareData && props.compareData.rows ? transferToUsefulData(props.compareData.rows) : [];
    resetData(initData);
    setHeaderCols(props.value.header_cols);
    setHeaderRows(props.value.header_rows);
  }, [props.value]);

  /** 将服务端数据转化成前端便于计算的数据，直接把isEmpty的单元格搞成{}，维持之前的写法，少改动
   *  [_td][x2][x3]
   *  [{}][y2][y3]
   *  _td是占用两行的单元格，即把{}的单元格占用
   *  */

  function transferToUsefulData(data) {
    return data.map((row) => {
      return {
        cells: row.cells.map((td) => {
          return td.isEmpty ? {} : { id: randomKey(), ...td };
        }),
      };
    });
  }

  // 将打平的数据,通过计算，设置它们的col_span,rows_span
  function resetData(data) {
    const _newData = removeEmptyRows(data);
    const newData = removeEmptyCols(_newData);
    newData.forEach((row, rowIndex) => {
      row.cells.forEach((col, colIndex) => {
        // 如果当前单元格不为空，
        if (Object.keys(col).length !== 0) {
          const row_span = getRowSpan(newData, rowIndex + 1, colIndex, 1); //查找该行后面紧邻的行的colIndex的个数
          const col_span = getColSpan(newData, rowIndex, colIndex + 1, 1); //查找该列后面紧邻的列的为空的个数
          col.row_span = row_span;
          col.col_span = col_span;
        }
      });
    });
    setTData(cloneDeep(newData));
  }

  //  去除数据中行里面所有单元格都是{}的行，如[[{},{}]],则需要删除[{},{}]
  function removeEmptyRows(data) {
    return data.filter((row) => {
      return !row.cells.every((col) => Object.keys(col).length === 0);
    });
  }

  /**除去每一列都是{}的列，如
   * [x1][{}][x2]
   * [y1][{}][y2]
   * 应该去掉中间的{} ，得到
   * [x1][x2]
   * [y1][y2]
   * */

  function removeEmptyCols(data) {
    let emptyCols = [], // 包括空{}的单元格的列号组成的数组
      notEmptyCols = []; // 包括非空{}的单元格的列号组成的数组
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data[i].cells.length; j++) {
        if (Object.keys(data[i].cells[j]).length === 0) {
          if (!emptyCols.includes(j)) {
            emptyCols.push(j);
          }
        } else {
          if (!notEmptyCols.includes(j)) {
            notEmptyCols.push(j);
          }
        }
      }
    }
    // 取notEmptyCols在emptyCols中的补集，就是每一列都是空的列号了。
    const cols = emptyCols.filter((it) => !notEmptyCols.includes(it));
    return data.map((row) => {
      return { cells: row.cells.filter((col, index) => !cols.includes(index)) };
    });
  }

  function getRowSpan(data, rowIndex, colIndex, number) {
    if (rowIndex >= data.length) {
      return 1;
    }
    // 如果rowIndex行的colIndex为空，则number++
    if (Object.keys(data[rowIndex].cells[colIndex]).length === 0) {
      number += getRowSpan(data, rowIndex + 1, colIndex, number);
    }
    return number;
  }

  function getColSpan(data, rowIndex, colIndex, number) {
    if (colIndex >= data[rowIndex].cells.length) {
      return 1;
    }
    // 如果rowIndex行的colIndex为空，则number++
    if (Object.keys(data[rowIndex].cells[colIndex]).length === 0) {
      number += getColSpan(data, rowIndex, colIndex + 1, number);
    }
    return number;
  }

  // 添加行
  function addRow(rowIndex, colIndex, td) {
    const item = {
      row_span: 1,
      col_span: 1,
      action: [],
      type: TD_TYPE._ACTION,
    };
    const leftConfitionItem = {
      left_var_code: '',
      left_var_type: '',
      left_var_name: '',
    };
    const { col_span } = tdata[0].cells[0];
    const cols = [];
    for (let i = 0; i < tdata[rowIndex].cells.length; i++) {
      //如果是列头上，添加行
      if (td.type === TD_TYPE._COL_CONDITION) {
        if (i < col_span) {
          cols.push({});
        } else {
          cols.push({ ...item, type: td.type, id: randomKey() });
        }
      } else {
        if (i < colIndex) {
          cols.push({});
        } else {
          let it = { ...item, id: randomKey() };
          if (td.type === TD_TYPE._ROW_CONDITION && i < col_span) {
            it = { ...it, type: td.type, id: randomKey() };
          }
          cols.push(it);
        }
      }
    }

    if (td.type === TD_TYPE._COL_CONDITION) {
      headerCols.splice(rowIndex + td.row_span, 0, { ...leftConfitionItem });
      setHeaderCols(headerCols);
    }
    tdata.splice(rowIndex + td.row_span, 0, { cells: cols });

    resetData(tdata);
  }

  // 添加列
  function addCol(rowIndex, colIndex, td) {
    const item = {
      row_span: 1,
      col_span: 1,
      action: [],
      type: TD_TYPE._ACTION,
    };
    const leftConfitionItem = {
      left_var_code: '',
      left_var_type: '',
      left_var_name: '',
    };
    const { row_span } = tdata[0].cells[0];
    for (let i = 0; i < tdata.length; i++) {
      let it = {};
      // 如果是行头，添加列，则是添加整列(除去最左上角的label)
      if (td.type === TD_TYPE._ROW_CONDITION) {
        // 行index 大于等于左上角label的row_span的，全部加有内容的行操作头
        if (i >= row_span) {
          it = { ...item, type: td.type, id: randomKey() };
        }

        // 如果是列头，添加列，则需要计算合并单元格的情况
      } else {
        if (i >= rowIndex) {
          if (td.type === TD_TYPE._COL_CONDITION && i < row_span) {
            it = { ...item, type: td.type, id: randomKey() };
          } else {
            it = { ...item, id: randomKey() };
          }
        }
      }
      tdata[i].cells.splice(colIndex + td.col_span, 0, it);
    }
    if (td.type === TD_TYPE._ROW_CONDITION) {
      headerRows.splice(colIndex + td.col_span, 0, { ...leftConfitionItem });
      setHeaderRows(headerRows);
    }
    resetData(tdata);
  }

  // 删除行
  function removeRow(rowIndex, colIndex, td) {
    const newData = cloneDeep(tdata); // 深copy一次
    const { row_span = 1 } = td;
    // 如果操作的单元格的row_span 大于 1，则说明它以及它覆盖的行后面的列都应该被重置为{}
    if (row_span > 1) {
      for (let j = rowIndex; j < rowIndex + row_span; j++) {
        for (let i = colIndex; i < newData[j].cells.length; i++) {
          newData[j].cells[i] = {};
        }
      }
    }
    const _td = findLeftFirstRowSpan(rowIndex, colIndex);
    // 如果没有找到，则说明当前行是一个没有被占据单元格的行，可以直接删除整行
    if (Object.keys(_td).length === 0) {
      newData.splice(rowIndex, 1);
      resetData(cloneDeep(newData));
    } else {
      /** 如果找到了，这里情况就复杂了*/
      if (_td.row_span > row_span) {
        /** 如果找到的单元格的row_span 大于当前row_span，则是如下图的情况
         *  [_td][x2][x3]
         *  [{}][y2][y3]
         *  _td 是一个row_span大于1的单元格，下面的{}是一个被_td占用的单元格,这时候 在x3或者x2上点击的删除行
         *  视图上，需要把y2,y3 移动到x2和x3的位置，才算完成删除行,得到以下效果
         *  [_td][y2][y3]
         *  [{}][{}][{}]
         *  step1: 遍历 _td.colIndex+1到newData[rowIndex].length直接的数字，把y2,y3移动上去
         *  step2: 删除
         * */

        // 再移动
        for (let i = _td.colIndex + 1; i < newData[rowIndex].cells.length; i++) {
          newData[rowIndex].cells[i] = cloneDeep(newData[rowIndex + row_span].cells[i]); // 深copy过去
          newData[rowIndex + row_span].cells[i] = {};
        }
        resetData(cloneDeep(newData));

        // 如果找到的单元格和本操作单元格的row_span一样，则不清楚到底是移动还是删除整行，需要向前递归，相当于操作_td
      } else if (_td.row_span === row_span) {
        removeRow(_td.rowIndex, _td.colIndex, _td);
      }
    }
    if (td.type === TD_TYPE._COL_CONDITION) {
      headerCols.splice(rowIndex, 1);
      setHeaderCols(headerCols);
    }
  }

  // 删除列
  function removeCol(rowIndex, colIndex, td) {
    const newData = cloneDeep(tdata);
    const { col_span = 1 } = td;
    // 如果操作的单元格的col_span 大于 1，则说明它以及它覆盖的列后面的列都应该被重置为{}
    if (col_span > 1) {
      for (let i = rowIndex; i < newData.length; i++) {
        for (let j = colIndex; j < colIndex + col_span; j++) {
          newData[i].cells[j] = {};
        }
      }
    }
    // 否则，就往上找到第一个col_span>1的单元格
    const _td = findTopFirstColSpan(rowIndex, colIndex);
    // 如果没有找到，则说明当前列是一个没有被占据单元格的列，可以直接删除整列
    if (Object.keys(_td).length === 0) {
      for (let i = 0; i < newData.length; i++) {
        newData[i].cells.splice(colIndex, 1);
      }
      resetData(cloneDeep(newData));
    } else {
      // 如果找到了，这里情况就复杂了
      if (_td.col_span > col_span) {
        /** 如果找到的单元格的col_span 大于当前col_span，则是如下图的情况
         *  [_td][{}][x3]
         *  [y1][y2][y3]
         *  _td 是一个col_span大于1的单元格，右侧的{}是一个被_td占用的单元格,这时候 在y1上点击的删除列
         *  视图上，需要把y2的列 移动到y1的列位置， y1才算完成删除行,得到以下效果
         *  [_td][{}][x3]
         *  [y2][{}][y3]
         *  step1: 遍历 _td.rowIndex+1到newData.length直接的数字
         *  step2: 删除
         * */

        // 遍历行
        for (let i = _td.rowIndex + 1; i < newData.length; i++) {
          newData[i].cells[colIndex] = cloneDeep(newData[i].cells[colIndex + 1]); // 深copy过去
          newData[i].cells[colIndex + 1] = {};
        }
        resetData(cloneDeep(newData));
      } else if (_td.col_span === col_span) {
        removeCol(_td.rowIndex, _td.colIndex, _td);
      }
    }
    if (td.type === TD_TYPE._ROW_CONDITION) {
      headerRows.splice(colIndex, 1);
      setHeaderRows(headerRows);
    }
  }

  /**
   * findLeftFirstRowSpan
   * 向左找到第一个row_span>1的单元格，并返回它的行列，如果没有找到，则返回null
   * @param {Number} rowIndex 行号
   * @param {Number} colIndex 列号
   * @return {Object} {rowIndex,colIndex,row_span,type} || {}
   */
  function findLeftFirstRowSpan(rowIndex, colIndex) {
    let td = {};
    for (let i = colIndex - 1; i >= 0; i--) {
      if (tdata[rowIndex].cells[i].row_span > 1) {
        td.rowIndex = rowIndex;
        td.colIndex = i;
        td.row_span = tdata[rowIndex].cells[i].row_span;
        td.type = tdata[rowIndex].cells[i].type;
        break;
      }
    }
    return td;
  }

  /**
   * findTopFirstColSpan
   * 向上找到第一个col_span>1的单元格，并返回它的行列，如果没有找到，则返回null
   * @param {Number} rowIndex 行号
   * @param {Number} colIndex 列号
   * @return {Object} {rowIndex,colIndex,col_span,type} || {}
   */
  function findTopFirstColSpan(rowIndex, colIndex) {
    let td = {};
    for (let i = rowIndex - 1; i >= 0; i--) {
      if (tdata[i].cells[colIndex].col_span > 1) {
        td.rowIndex = i;
        td.colIndex = colIndex;
        td.col_span = tdata[i].cells[colIndex].col_span;
        td.type = tdata[i].cells[colIndex].type;
        break;
      }
    }
    return td;
  }

  // 设置label
  function handleLabelChange(text, td) {
    td.text = text;
    resetData(cloneDeep(tdata));
  }

  // 设置列左变量
  function handleColLeftConditionChange(value, index) {
    headerCols[index] = {
      left_var_code: value.var_code,
      left_var_type: value.var_type,
      left_var_name: value.var_name,
    };
    setHeaderCols(cloneDeep(headerCols));
  }

  // 设置行左变量
  function handleRowLeftConditionChange(value, index) {
    headerRows[index] = {
      left_var_code: value.var_code,
      left_var_type: value.var_type,
      left_var_name: value.var_name,
    };
    setHeaderRows(cloneDeep(headerRows));
  }

  //  设置条件
  function handleConditionChange(val, td) {
    td.conditions = val;
    setTData(cloneDeep(tdata));
  }

  // 设置动作
  function handleActionChange(val, td) {
    td.action = val;
    setTData(cloneDeep(tdata));
  }

  // 获取值
  function getValue(showError) {
    const finallyData = { rows: [], header_rows: [], header_cols: [] };
    try {
      // 帮后端填充数据
      const newData = cloneDeep(tdata);
      newData.forEach((tr, rowIndex) => {
        tr.cells.forEach((td, colIndex) => {
          const { row_span = 1, col_span = 1, ...tdValues } = td;
          for (let i = rowIndex; i < rowIndex + row_span; i++) {
            for (let j = colIndex; j < col_span + colIndex; j++) {
              if (Object.keys(newData[i].cells[j]).length === 0) {
                newData[i].cells[j] = { ...tdValues, isEmpty: true };
              }
            }
          }
        });
      });
      validate(newData);
      finallyData.rows = newData;
      finallyData.header_rows = headerRows;
      finallyData.header_cols = headerCols;
      // console.log('最后的数据:', finallyData);
      return {
        error: null,
        value: finallyData,
      };
    } catch (error) {
      if (showError) {
        message.warning(error);
      }
      return {
        error: error,
        value: {},
      };
    }
  }

  function validate(data) {
    const firstTd = data[0].cells[0];
    const { row_span = 1, col_span = 1 } = firstTd;
    // 验证表名
    if (firstTd.type === TD_TYPE._LABEL && !firstTd.text) {
      throw '请设置表名';
    }
    // 验证列头左值
    if (headerCols.length !== row_span) {
      throw '列头左值跟实际数据长度不一致';
    }
    // 验证行头左值
    if (headerRows.length !== col_span) {
      throw '行头左值跟实际数据长度不一致';
    }
    headerCols.forEach((td) => {
      if (td && td.left_var_code === '') {
        throw '请设置左变量';
      }
    });
    headerRows.forEach((td) => {
      if (td && td.left_var_code === '') {
        throw '请设置左变量';
      }
    });

    // 验证单元格
    data.forEach((tr) => {
      tr.cells.forEach((td) => {
        // 验证条件
        if (td.type === TD_TYPE._COL_CONDITION || td.type === TD_TYPE._ROW_CONDITION) {
          if (td.conditions && td.conditions.length > 0) {
            validateConditions(td.conditions);
          } else {
            throw '请设置条件';
          }
        }
        // 验证动作
        if (td.type === TD_TYPE._ACTION) {
          if (td.action) {
            validateActions(td.action);
          } else {
            throw '请设置动作';
          }
        }
      });
    });
  }

  const compareData = flattenDepth(
    (props.compareData && props.compareData.rows && props.compareData.rows.map((row) => row.cells)) || []
  );
  const isHasLog = props.logs && Object.keys(props.logs).length > 0;
  function renderTr(tr, rowIndex, nums) {
    return (
      <tr key={rowIndex}>
        {tr.cells.map((td, colIndex) => {
          const { row_span = 1, col_span = 1 } = td;
          const removeBtns = [];

          if (td.type === TD_TYPE._COL_CONDITION || td.type === TD_TYPE._ROW_CONDITION) {
            removeBtns.push(
              <span style={{ marginRight: '2px' }} onClick={() => addRow(rowIndex, colIndex, td)}>
                添加行
              </span>
            );
            removeBtns.push(<span onClick={() => addCol(rowIndex, colIndex, td)}>添加列</span>);
          }
          if (td.type === TD_TYPE._COL_CONDITION) {
            if (nums.col_condition_rows_num > 1) {
              removeBtns.push(<span onClick={() => removeRow(rowIndex, colIndex, td)}>删除行</span>);
            }
            if (col_span + 1 !== tr.length && nums.col_condition_cols_num > 1) {
              removeBtns.push(<span onClick={() => removeCol(rowIndex, colIndex, td)}>删除列</span>);
            }
          }
          if (td.type === TD_TYPE._ROW_CONDITION) {
            if (row_span + 1 !== tdata.length && nums.row_condition_rows_num > 1) {
              removeBtns.push(<span onClick={() => removeRow(rowIndex, colIndex, td)}>删除行</span>);
            }
            if (nums.row_condition_cols_num > 1) {
              removeBtns.push(<span onClick={() => removeCol(rowIndex, colIndex, td)}>删除列</span>);
            }
          }
          const menu = (
            <Menu>
              {removeBtns.map((btn, index) => (
                <Menu.Item key={index}>{btn}</Menu.Item>
              ))}
            </Menu>
          );

          if (Object.keys(td).length === 0) {
            return null;
          } else {
            const { id, row_span, col_span, cell_id, ...detail } = td;
            const cell = compareData.find((it) => it.id === id) || {};
            delete cell.col_span;
            delete cell.row_span;
            delete cell.cell_id;

            const compareC = compareClass(
              {
                ...props,
                value: { value: JSON.stringify({ id, ...detail }) },
                compareData:
                  Object.keys(cell).length > 0
                    ? {
                        value: JSON.stringify(cell),
                      }
                    : '',
              },
              'value'
            );

            const compareCols = compareClass({ ...props }, 'header_cols', rowIndex, 'left_var_code');
            const compareRows = compareClass({ ...props }, 'header_rows', colIndex, 'left_var_code');

            let compareClassName = '';
            let bgColor = '';
            switch (td.type) {
              case TD_TYPE._LABEL:
                compareClassName = compareC;
                bgColor = '#f8f8f8';
                break;
              case TD_TYPE._COL_CONDITION:
                compareClassName = compareC || compareCols || '';
                bgColor = '#f3f8ff';
                break;
              case TD_TYPE._ROW_CONDITION:
                compareClassName = compareC || compareRows || '';
                bgColor = '#f5fdf1';
                break;
              case TD_TYPE._ACTION:
                compareClassName = compareC;
                break;
              default:
                break;
            }
            return (
              <td
                key={rowIndex + ',' + colIndex}
                rowSpan={td.row_span}
                colSpan={td.col_span}
                className={compareClassName}
                style={{
                  // borderRight: '1px solid #ccc',
                  // borderBottom: '1px solid #ccc',
                  background: bgColor,
                  lineHeight: '20px',
                  minWidth: '150px',
                }}
              >
                {td.type === TD_TYPE._COL_CONDITION || td.type === TD_TYPE._ROW_CONDITION ? (
                  <Dropdown overlay={menu} trigger={['contextMenu']} disabled={props.disabled}>
                    <div className='td-content flex'>
                      <div style={{ width: '100%' }}>
                        <Row type='flex' align='middle' justify='space-between'>
                          <Col>
                            {td.type === TD_TYPE._COL_CONDITION && (
                              <>
                                {!isHasLog && (
                                  <PopValue
                                    {...props}
                                    value={{
                                      var_code: headerCols[rowIndex].left_var_code,
                                      var_name: headerCols[rowIndex].left_var_name,
                                      var_type: headerCols[rowIndex].left_var_type
                                    }}
                                    type={headerCols[rowIndex].left_var_type}
                                    event_id={headerCols[rowIndex].left_event_id}
                                    placeholder={'左变量'}
                                    variable={props.variable}
                                    using_variables={props.using_variables}
                                    onChange={(value) => handleColLeftConditionChange(value, rowIndex)}
                                    disabled={props.disabled}
                                    except={['literal']}
                                    isTxt={true}
                                    color={!props.disabled ? 'rgb(1, 116, 223)' : '#444444'}
                                    isLeft={true}
                                  />
                                )}
                                <ConditionsIndex
                                  {...props}
                                  disabled={props.disabled}
                                  value={td.conditions}
                                  leftDisable={true}
                                  type='cross'
                                  leftConditionValue={{
                                    var_code: headerCols[rowIndex].left_var_code,
                                    var_name: headerCols[rowIndex].left_var_name,
                                    var_type: headerCols[rowIndex].left_var_type,
                                  }}
                                  onChange={(value) => handleConditionChange(value, td)}
                                  isHit={isHit(td)}
                                  isCompare={false}
                                />
                              </>
                            )}
                            {td.type === TD_TYPE._ROW_CONDITION && (
                              <>
                                {!isHasLog && (
                                  <PopValue
                                    {...props}
                                    value={{
                                      var_code: headerRows[colIndex].left_var_code,
                                      var_name: headerRows[colIndex].left_var_name,
                                      var_type: headerRows[colIndex].left_var_type
                                    }}
                                    type={headerRows[colIndex].left_var_type}
                                    event_id={headerRows[colIndex].left_event_id}
                                    placeholder={'左变量'}
                                    variable={props.variable}
                                    using_variables={props.using_variables}
                                    onChange={(value) => handleRowLeftConditionChange(value, colIndex)}
                                    disabled={props.disabled}
                                    except={['literal']}
                                    isTxt={true}
                                    color={!props.disabled ? 'rgb(1, 116, 223)' : '#444444'}
                                    isLeft={true}
                                  />
                                )}
                                <ConditionsIndex
                                  {...props}
                                  disabled={props.disabled}
                                  value={td.conditions}
                                  leftDisable={true}
                                  type='cross'
                                  leftConditionValue={{
                                    var_code: headerRows[colIndex].left_var_code,
                                    var_name: headerRows[colIndex].left_var_name,
                                    var_type: headerRows[colIndex].left_var_type,
                                  }}
                                  onChange={(value) => handleConditionChange(value, td)}
                                  isHit={isHit(td)}
                                  isCompare={false}
                                />
                              </>
                            )}
                          </Col>
                          <Col>
                            {!props.disabled && (
                              <Dropdown overlay={menu} trigger={['click']} disabled={props.disabled}>
                                <IconFont type='iconsetting-1' className='setting-icon' style={{ fontSize: '16px' }} />
                              </Dropdown>
                            )}
                          </Col>
                        </Row>
                      </div>
                    </div>
                  </Dropdown>
                ) : td.type === TD_TYPE._LABEL ? (
                  <div className='td-content flex'>
                    <InputText
                      value={td.text || '请设置表名'}
                      color={!props.disabled ? '#4caf50' : '#444444'}
                      onChange={(value) => handleLabelChange(value, td)}
                      disabled={props.disabled}
                    />
                  </div>
                ) : td.type === TD_TYPE._ACTION ? (
                  <div className={`${!props.disabled && 'flex'} td-content`}>
                    <Actions
                      {...props}
                      logs={props.logs}
                      hitType={1}
                      cellId={td.id}
                      variable={props.variable}
                      using_variables={props.using_variables}
                      actions={props.actions}
                      value={td.action}
                      // compareData={props.compareData && props.compareData.rows[rowIndex][colIndex]}
                      disabled={props.disabled}
                      onChange={(value) => handleActionChange(value, td)}
                      isCompare={false}
                    />
                  </div>
                ) : null}
              </td>
            );
          }
        })}
      </tr>
    );
  }
  const { col_span = 1, row_span = 1 } = tdata[0].cells[0]; // 最左上角的label单元格的row_span
  const nums = {
    col_condition_rows_num: row_span, //type为col_condition的行数量
    col_condition_cols_num: tdata[0].cells.length - col_span, //type为col_condition的最大列数量
    row_condition_rows_num: tdata.length - row_span, //type为row_condition的行数量
    row_condition_cols_num: col_span, //type为row_condition的最大列数量
  };
  return (
    <div className='cross-table table-wrap-con'>
      {/* <Button onClick={() => reset()}>重置</Button>
      <Button onClick={() => getValue()}>获取值</Button> */}

      <table className={`${props.disabled ? 'disabled' : ''}`} border='1'>
        <thead>
          {tdata.map((tr, rowIndex) => {
            return rowIndex < row_span ? renderTr(tr, rowIndex, nums) : null;
          })}
        </thead>
        <tbody>
          {tdata.map((tr, rowIndex) => {
            return rowIndex >= row_span ? renderTr(tr, rowIndex, nums) : null;
          })}
        </tbody>
      </table>
    </div>
  );
}
